<template>
  <swiper
      :modules="modules"
      autoplay
      :slides-per-view="1"
      :space-between="50"
      :pagination="{ clickable: true }">
    <swiper-slide v-for="(item,index) in banners" :key="index">
      <a :href="item.link">
        <img :src="item.image" alt=""  @load="swiperImageLoad">
      </a>
    </swiper-slide>
  </swiper>
</template>
<script>
import { Pagination, A11y ,Autoplay} from 'swiper';
import { Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import {ref} from 'vue'
// ,watch,nextTick
export default {
  name: "SwiperArea",
  props:{
    banners:{
      type:Array,
      default:function (){
        return []
      }
    }
  },
  components:{
    Swiper,SwiperSlide,
  },
  setup(props,context){
    let isLoad=ref(false)
    function swiperImageLoad(){
      if(!isLoad.value){
        context.emit('swiperImageLoad') //vue3的emit方法通过context访问并且没有$符号
        isLoad.value=!isLoad.value
      }
    }
    return{
      isLoad,
      //方法
      swiperImageLoad,
      modules:[Pagination,A11y,Autoplay],
    }
  }
}
</script>
<style scoped>
img{
  height:13rem;
  width: 100%;
}
</style>